<style lang="scss" scoped>
.navbar-container {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
}
.navbar-menu {
  justify-content: center;
  width: 100%;
  background-color: #ffffff;
  .navbar-item:hover {
    background: #ffffff !important;
    outline: 0 !important;
    color: #409eff !important;
  }
  .navbar-item.is-active {
    color: black !important;
    background: #ffffff !important;
  }
}
</style>
<template>
  <div class="navbar-container">
    <el-menu
      mode="horizontal"
      class="navbar-menu"
      background-color="#ffffff"
      text-color="black"
    >
      <el-menu-item
        :index="item"
        v-for="(item, index) in props.list"
        :key="index"
        class="navbar-item"
        >{{ item }}</el-menu-item
      >
    </el-menu>
  </div>
</template>
<script setup>
const props = defineProps(['list'])

</script>
